jQuery-এর বেসিক ধারণা

jQuery একটি জনপ্রিয় জাভাস্ক্রিপ্ট লাইব্রেরি, যা ওয়েব ডেভেলপমেন্টে জাভাস্ক্রিপ্ট কোড সহজতর এবং দ্রুততর করে। এটি ব্যবহার করে সহজে DOM ম্যানিপুলেশন, ইভেন্ট হ্যান্ডলিং, এনিমেশন, এবং AJAX এর মতো কাজ করা যায়।

jQuery কী?

• jQuery হল একটি ওপেন সোর্স জাভাস্ক্রিপ্ট লাইব্রেরি, যা ২০০৬ সালে জন রেসিগ (John Resig) তৈরি করেন।
• এটি জাভাস্ক্রিপ্ট কোডকে সহজতর, সংক্ষিপ্ত এবং কার্যকর করে তোলে।
• jQuery-র মূল লক্ষ্য হল "Write Less, Do More", অর্থাৎ কম কোড লিখে বেশি কাজ করা।

jQuery কেন ব্যবহার করবেন?

1. সহজ কোড লেখা: জটিল কাজের জন্য লম্বা জাভাস্ক্রিপ্ট কোডের প্রয়োজন হয় না।
2. ব্রাউজার সামঞ্জস্য: jQuery সব আধুনিক এবং পুরোনো ব্রাউজারে সমানভাবে কাজ করে।
3. DOM ম্যানিপুলেশন: HTML এলিমেন্ট যোগ, পরিবর্তন, বা মুছে ফেলার কাজ সহজ।
4. ইভেন্ট হ্যান্ডলিং: ব্যবহারকারীর মাউস, কীবোর্ড বা অন্যান্য ইন্টারঅ্যাকশন হ্যান্ডল করা।
5. AJAX সাপোর্ট: jQuery AJAX দিয়ে সার্ভারের সাথে ডেটা আদান-প্রদান সহজ করে।
6. প্লাগইন সমর্থন: jQuery ব্যবহার করে নতুন ফিচার যোগ করা যায়।

jQuery সেটআপ

১. CDN থেকে jQuery ব্যবহার

CDN এর মাধ্যমে jQuery ফাইল লোড করা সবচেয়ে সহজ। উদাহরণ:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

২. লোকাল ফাইল ব্যবহার

আপনার পিসিতে jQuery ডাউনলোড করুন এবং HTML ফাইলে যুক্ত করুন:

<script src="path-to-your-folder/jquery.min.js"></script>

jQuery-এর মৌলিক গঠন

jQuery কোড লিখতে $ চিহ্ন ব্যবহার করা হয়, যা jQuery-এর শর্টকাট। উদাহরণ:

$(document).ready(function() {
    // এখানে আপনার jQuery কোড লিখুন
});

উপরের কোডটি নিশ্চিত করে যে, পুরো HTML লোড হওয়ার পরে jQuery কার্যকর হবে।

jQuery সিলেক্টর (Selectors)

jQuery সিলেক্টরের মাধ্যমে HTML এলিমেন্ট নির্বাচন করে তাদের উপর অ্যাকশন প্রয়োগ করা হয়।

• এলিমেন্ট সিলেক্টর: $("p") → সকল <p> ট্যাগ নির্বাচন।
• আইডি সিলেক্টর: $("#myId") → নির্দিষ্ট আইডি নির্বাচন।
• ক্লাস সিলেক্টর: $(".myClass") → নির্দিষ্ট ক্লাস নির্বাচন।

উদাহরণ:

$(document).ready(function() {
    $("p").hide(); // সকল প্যারাগ্রাফ লুকাবে
    $("#myId").css("color", "red"); // নির্দিষ্ট আইডি-র রং পরিবর্তন
});

jQuery ইভেন্ট হ্যান্ডলিং (Event Handling)

jQuery ব্যবহার করে ব্যবহারকারীর বিভিন্ন ইন্টারঅ্যাকশন পরিচালনা করা যায়।

• ক্লিক ইভেন্ট: click()
• মাউস ইভেন্ট: hover(), mouseenter(), mouseleave()
• কীবোর্ড ইভেন্ট: keydown(), keyup()
• ফর্ম ইভেন্ট: submit(), focus(), blur()

উদাহরণ:

$(document).ready(function() {
    $("button").click(function() {
        alert("বাটনে ক্লিক করা হয়েছে!");
    });
});

DOM ম্যানিপুলেশন (DOM Manipulation)

jQuery ব্যবহার করে HTML কনটেন্ট সহজেই পরিবর্তন, যোগ বা মুছে ফেলা যায়।

• কনটেন্ট পরিবর্তন: text(), html(), val()
• অ্যাট্রিবিউট পরিবর্তন: attr(), removeAttr()
• এলিমেন্ট যোগ/মুছে ফেলা: append(), prepend(), remove(), empty()

উদাহরণ:

$(document).ready(function() {
    $("#myButton").click(function() {
        $("#myDiv").text("নতুন টেক্সট যোগ করা হয়েছে!");
    });
});

ইফেক্টস (Effects)

jQuery দিয়ে HTML এলিমেন্টের উপর ইফেক্ট প্রয়োগ করা যায়, যেমন:

• শো/হাইড: show(), hide(), toggle()
• ফেডিং ইফেক্টস: fadeIn(), fadeOut(), fadeToggle()
• স্লাইডিং ইফেক্টস: slideUp(), slideDown(), slideToggle()

উদাহরণ:

$(document).ready(function() {
    $("#fadeButton").click(function() {
        $("#myDiv").fadeToggle();
    });
});

সারাংশ

jQuery জাভাস্ক্রিপ্টের জটিল কাজগুলোকে সহজ এবং কার্যকর করে তোলে। বেসিক সিলেক্টর, DOM ম্যানিপুলেশন, ইভেন্ট হ্যান্ডলিং এবং ইফেক্ট ব্যবহারের মাধ্যমে jQuery দ্রুত এবং শক্তিশালী ওয়েব অ্যাপ্লিকেশন তৈরি করার সুযোগ করে দেয়।

jQuery হলো একটি জনপ্রিয় এবং শক্তিশালী জাভাস্ক্রিপ্ট লাইব্রেরি, যা ওয়েব ডেভেলপমেন্টে জাভাস্ক্রিপ্ট ব্যবহারকে সহজতর এবং দ্রুততর করে। এটি ওপেন সোর্স হওয়ার পাশাপাশি ক্রস-ব্রাউজার সমর্থিত। এর মাধ্যমে ডকুমেন্ট ট্রাভার্সাল, ইভেন্ট হ্যান্ডলিং, DOM ম্যানিপুলেশন, অ্যানিমেশন এবং AJAX-এর মতো কাজগুলো সহজে করা যায়।

jQuery-এর স্লোগান হলো:
"Write Less, Do More"
অর্থাৎ কম কোড লিখে বেশি কাজ করা।

jQuery-এর মূল বৈশিষ্ট্য

• DOM (Document Object Model) ম্যানিপুলেশন সহজ করে।
• ইভেন্ট হ্যান্ডলিং ও পরিচালনা দ্রুত এবং সরল।
• AJAX কলের মাধ্যমে ডেটা লোড এবং পাঠানো।
• ক্রস-ব্রাউজার সমর্থন প্রদান করে।
• বিল্ট-ইন এবং কাস্টম অ্যানিমেশন সাপোর্ট।
• প্লাগইন ব্যবহারের সুবিধা।

jQuery কেন প্রয়োজন?

১. সহজ এবং সংক্ষিপ্ত কোড লেখা

জাভাস্ক্রিপ্টের জটিল এবং লম্বা কোডকে jQuery দিয়ে খুব সহজে ছোট করা যায়। উদাহরণস্বরূপ:

জাভাস্ক্রিপ্ট:

document.getElementById("myButton").addEventListener("click", function() {
    document.getElementById("myDiv").style.display = "none";
});

jQuery:

$("#myButton").click(function() {
    $("#myDiv").hide();
});

২. ব্রাউজার সামঞ্জস্য

জাভাস্ক্রিপ্টের বিভিন্ন ব্রাউজারে সমানভাবে কাজ না করার সমস্যা রয়েছে। তবে jQuery এই সমস্যাগুলো সমাধান করে এবং সমস্ত আধুনিক ও পুরোনো ব্রাউজারে সমান কার্যকর।

৩. DOM ম্যানিপুলেশন সহজতর

HTML এবং CSS ম্যানিপুলেশন খুবই সহজ। jQuery দিয়ে সহজে:

• নতুন HTML এলিমেন্ট যোগ বা সরানো যায়।
• CSS প্রোপার্টি পরিবর্তন করা যায়।
• DOM ট্রাভার্সাল সহজতর হয়।

৪. ইভেন্ট হ্যান্ডলিং আরও সরল

ব্যবহারকারীর ইন্টারঅ্যাকশন (যেমন ক্লিক, স্ক্রল, সাবমিট) খুব সহজেই হ্যান্ডল করা যায়। উদাহরণস্বরূপ:

$("button").click(function() {
    alert("বাটনে ক্লিক করা হয়েছে!");
});

৫. AJAX সাপোর্ট

jQuery AJAX-এর মাধ্যমে ডেটা লোড ও সাবমিট করা খুবই সহজ। সার্ভারের সাথে ডেটা আদান-প্রদান এবং রিয়েল-টাইম ওয়েব অ্যাপ্লিকেশন তৈরি করতে এটি খুবই কার্যকর।

৬. ইফেক্টস এবং অ্যানিমেশন

জটিল অ্যানিমেশন তৈরি বা HTML এলিমেন্টে ইফেক্ট যোগ করা সহজ হয়। যেমন:

$("#myDiv").fadeOut("slow");

৭. প্লাগইন সাপোর্ট

jQuery প্লাগইন ব্যবহার করে নতুন ফিচার যোগ করা যায়। উদাহরণস্বরূপ, ফর্ম ভ্যালিডেশন, স্লাইডার, টুলটিপ ইত্যাদি।

৮. উন্নত পারফরম্যান্স

DOM ম্যানিপুলেশন এবং ইভেন্ট হ্যান্ডলিংয়ে jQuery জাভাস্ক্রিপ্টের তুলনায় দ্রুত এবং কার্যকর।

jQuery-এর ব্যবহার ক্ষেত্র

1. ইন্টারঅ্যাকটিভ ওয়েবপেজ:
   ইউজারের ইন্টারঅ্যাকশন সহজে হ্যান্ডল করা যায়।
2. AJAX-বেসড অ্যাপ্লিকেশন:
   রিয়েল-টাইম ডেটা লোড এবং সার্ভারের সাথে যোগাযোগ।
3. ফর্ম হ্যান্ডলিং:
   ইউজার ইনপুট ভ্যালিডেশন এবং সাবমিশন।
4. UI ইফেক্ট:
   অ্যানিমেশন, স্লাইডার, মডাল উইন্ডো।
5. প্লাগইন ডেভেলপমেন্ট:
   কাস্টম ফিচার তৈরিতে ব্যবহার।

উদাহরণ

একটি HTML বাটন ক্লিক করে প্যারাগ্রাফ লুকানোর উদাহরণ:

HTML:

<p>এটি একটি সাধারণ প্যারাগ্রাফ।</p>
<button>লুকান</button>

jQuery:

$(document).ready(function() {
    $("button").click(function() {
        $("p").hide();
    });
});

সারাংশ

jQuery হল একটি শক্তিশালী টুল, যা জাভাস্ক্রিপ্টের জটিল কাজগুলোকে সহজ করে দেয়। এটি DOM ম্যানিপুলেশন, ইভেন্ট হ্যান্ডলিং, AJAX এবং অ্যানিমেশনের জন্য কার্যকর। কম কোডে দ্রুত এবং ক্রস-ব্রাউজার সাপোর্টেড ওয়েব অ্যাপ্লিকেশন তৈরি করতে jQuery অপরিহার্য।

জাভাস্ক্রিপ্ট এবং jQuery উভয়ই ওয়েব ডেভেলপমেন্টে জনপ্রিয় টুল, কিন্তু তাদের ব্যবহারের ধরন এবং কার্যকারিতায় পার্থক্য রয়েছে। নিচে জাভাস্ক্রিপ্ট এবং jQuery-র মূল পার্থক্য তুলে ধরা হলো।

ভাষা ও লাইব্রেরির পার্থক্য

জাভাস্ক্রিপ্ট:

• জাভাস্ক্রিপ্ট হলো একটি প্রোগ্রামিং ভাষা যা ব্রাউজারে সরাসরি রান করে।
• এটি ডকুমেন্ট অবজেক্ট মডেল (DOM) ম্যানিপুলেশন, ইভেন্ট হ্যান্ডলিং এবং অ্যানিমেশন নির্মাণে সরাসরি ব্যবহার করা হয়।

jQuery:

• jQuery হলো জাভাস্ক্রিপ্টের একটি লাইব্রেরি, যা জাভাস্ক্রিপ্ট কোডিংকে সহজ ও দ্রুত করে।
• এটি জাভাস্ক্রিপ্টের উপর নির্মিত, এবং সিলেক্টর, AJAX কল, এবং অন্যান্য জটিল কাজগুলো সহজে করার জন্য ডিজাইন করা হয়েছে।

কোড সহজতা ও দ্রুততা

জাভাস্ক্রিপ্ট:

• জাভাস্ক্রিপ্ট দিয়ে বিস্তারিত এবং নির্দিষ্ট কাজ করা সম্ভব, যা জটিল এবং বিস্তৃত কোডের প্রয়োজন হতে পারে।
• প্রতিটি ব্রাউজারে কোড ভিন্নভাবে আচরণ করতে পারে, যা ব্রাউজার সামঞ্জস্য ইস্যু তৈরি করে।

jQuery:

• jQuery দিয়ে একই ফাংশনালিটি অনেক কম কোড লিখে সম্পন্ন করা যায়, যা দ্রুত এবং সহজ।
• ক্রস-ব্রাউজার সামঞ্জস্য বিষয়ে jQuery আরও ভালো পারফরম্যান্স দেয়।

ফাংশনালিটি ও ব্যবহার

জাভাস্ক্রিপ্ট:

• জাভাস্ক্রিপ্ট দিয়ে ওয়েব পেজের সমস্ত আচরণ নিয়ন্ত্রণ করা যায়।
• এসি৬ এবং নতুন জাভাস্ক্রিপ্ট স্ট্যান্ডার্ড নিয়ে আরও শক্তিশালী এবং সহজ হয়েছে।

jQuery:

• jQuery ব্যবহার করে ডকুমেন্ট ট্রাভার্সাল, ইভেন্ট হ্যান্ডলিং এবং AJAX অপারেশন সহজ হয়ে ওঠে।
• jQuery অনেক ওয়েব ডেভেলপারের কাছে প্রিয় কারণ এটি ডকুমেন্ট হ্যান্ডলিং এবং ইভেন্ট ম্যানেজমেন্টকে অনেক সহজ করে।

পারফরম্যান্স এবং সামঞ্জস্য

জাভাস্ক্রিপ্ট:

• সরাসরি ব্রাউজারে চালানোর জন্য অপ্টিমাইজ করা হয়েছে, যা কিছু ক্ষেত্রে jQuery-র চেয়ে দ্রুততর হতে পারে।
• মডার্ন জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক এবং লাইব্রেরির সাথে সংগতিপূর্ণ।

jQuery:

• jQuery কিছু ক্ষেত্রে পারফরম্যান্স কম দেখাতে পারে, বিশেষ করে যদি পেজে অতিরিক্ত jQuery ফাংশন ব্যবহার করা হয়।
• প্লাগিন এবং থার্ড-পার্টি লাইব্রেরির স

াথে ভালো সামঞ্জস্য প্রদান করে।

সারাংশ

জাভাস্ক্রিপ্ট এবং jQuery উভয়ই তাদের নিজস্ব সুবিধা এবং ব্যবহারের ক্ষেত্র রাখে। jQuery জাভাস্ক্রিপ্টের জটিলতা কমিয়ে অনেক কিছু সহজ করে, যদিও জাভাস্ক্রিপ্টের নতুন স্ট্যান্ডার্ড এবং ফ্রেমওয়ার্কগুলি অনেক কাজ আরও সক্ষম এবং ফ্লেক্সিবল করে তোলে। তাই, প্রোজেক্টের চাহিদা অনুসারে উভয়ের মধ্যে সঠিক নির্বাচন করা জরুরি।

jQuery সেটআপ দুইভাবে করা যায়: একটি হলো CDN (Content Delivery Network) ব্যবহার করে এবং অন্যটি হলো লোকাল ইনস্টলেশন। প্রতিটি পদ্ধতির ব্যবহার এবং সেটআপ প্রক্রিয়া নিম্নে আলোচনা করা হলো।

CDN ব্যবহার করে jQuery সেটআপ

সুবিধা:

• দ্রুত লোড হয়, কারণ ব্রাউজার সাধারণত পপুলার CDN থেকে ক্যাশেড ভার্সন ব্যবহার করতে পারে।
• কোনো লোকাল ফাইল ডাউনলোড করার প্রয়োজন নেই।
• বাইরের সার্ভার থেকে ম্যানেজড এবং আপডেটেড ভার্সন পাওয়া যায়।

সেটআপ প্রক্রিয়া:

1. উপযুক্ত jQuery CDN লিঙ্ক চয়ন করুন। পপুলার CDN-র একটি হল Google CDN।
2. HTML ডকুমেন্টের <head> ট্যাগের মধ্যে বা <body> ট্যাগের শেষে jQuery CDN লিঙ্কটি যুক্ত করুন।

উদাহরণ:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

লোকাল ইনস্টলেশন

সুবিধা:

• ইন্টারনেট কানেকশন ছাড়াও কাজ করে, যা ডেভেলপমেন্ট স্টেজে সুবিধাজনক।
• নিরাপত্তা নীতি বা এক্সেস নিয়ন্ত্রণ থাকলে CDN থেকে ব্লক হওয়ার ঝুঁকি এড়ানো যায়।
• কাস্টমাইজ করা সহজ, বিশেষ করে যদি স্পেশাল ভার্সন বা মডিফিকেশন প্রয়োজন হয়।

সেটআপ প্রক্রিয়া:

1. jQuery ওয়েবসাইট থেকে পছন্দসই ভার্সনের jQuery ফাইলটি ডাউনলোড করুন।
2. ডাউনলোড করা jQuery ফাইলটি ওয়েব প্রোজেক্টের সঠিক ফোল্ডারে সংরক্ষণ করুন।
3. HTML ডকুমেন্টে jQuery ফাইলটির পাথ দিয়ে <script> ট্যাগ যুক্ত করুন।

উদাহরণ:

<script src="js/jquery-3.7.1.min.js"></script>

উপরে উল্লেখিত js/ হল যে ফোল্ডারে আপনি jQuery ফাইলটি রাখবেন।

jQuery সেটআপ করার জন্য CDN এবং লোকাল ইনস্টলেশন উভয় পদ্ধতিরই বিশেষ বিশেষ সুবিধা রয়েছে। প্রজেক্টের প্রয়োজন এবং পরিস্থিতি অনুসারে যে কোনো একটি পদ্ধতি নির্বাচন করা যেতে পারে। CDN ব্যবহার করলে দ্রুত লোড হয় এবং ব্যান্ডউইথ সাশ্রয় হয়, অন্যদিকে লোকাল ইনস্টলেশন আপনাকে অফলাইনে কাজ করার সুবিধা দেয় এবং ফুল কন্ট্রোল প্রদান করে।

jQuery সিলেক্টরগুলো ওয়েব ডেভেলপারদের ডকুমেন্ট অবজেক্ট মডেল (DOM) থেকে নির্দিষ্ট এলিমেন্ট খুঁজে বের করে তাদের উপর অপারেশন সঞ্চালনের ক্ষমতা দেয়। সিলেক্টরগুলো কোনো এলিমেন্ট, আইডি, বা ক্লাস অনুযায়ী এলিমেন্ট নির্বাচন করতে সাহায্য করে।

এলিমেন্ট সিলেক্টর

এলিমেন্ট সিলেক্টর একটি HTML ট্যাগের নাম ব্যবহার করে সকল মিল এলিমেন্টকে নির্বাচন করে। উদাহরণস্বরূপ, যদি আপনি সকল <p> ট্যাগের এলিমেন্টকে নির্বাচন করতে চান, তবে নিম্নোক্ত jQuery কোড ব্যবহার করতে পারেন:

$("p").css("color", "red");

এই কোডটি সকল <p> ট্যাগের টেক্সটের রঙ লাল করে দেবে।

আইডি সিলেক্টর

আইডি সিলেক্টর একটি নির্দিষ্ট এলিমেন্ট নির্বাচন করতে ব্যবহৃত হয়, যার আইডি অ্যাট্রিবিউট একটি অনন্য মান ধারণ করে। উদাহরণস্বরূপ, যদি আপনার HTML ডকুমেন্টে একটি আইডি "myDiv" সহ একটি <div> থাকে, তবে নিম্নোক্ত jQuery কোড ব্যবহার করতে পারেন:

$("#myDiv").hide();

এই কোডটি আইডি "myDiv" যুক্ত <div> এলিমেন্টটিকে লুকিয়ে ফেলবে।

ক্লাস সিলেক্টর

ক্লাস সিলেক্টর সেই সকল এলিমেন্টগুলোকে নির্বাচন করে, যাদের মধ্যে নির্দিষ্ট ক্লাস অ্যাট্রিবিউট থাকে। উদাহরণস্বরূপ, যদি আপনি ক্লাস "highlight" যুক্ত সকল এলিমেন্টকে নির্বাচন করতে চান, তবে নিম্নোক্ত jQuery কোড ব্যবহার করতে পারেন:

$(".highlight").css("background-color", "yellow");

এই কোডটি সকল ক্লাস "highlight" যুক্ত এলিমেন্টদের পটভূমির রঙ হলুদ করে দেবে।

jQuery সিলেক্টরগুলো ওয়েব পেজের বিভিন্ন এলিমেন্ট নির্বাচনের জন্য শক্তিশালী এবং দক্ষ টুল হিসেবে কাজ করে। এই সিলেক্টরগুলোর মাধ্যমে DOM এলিমেন্টগুলোর উপর বিভিন্ন অপারেশন সহজে পরিচালনা করা সম্ভব হয়, যা ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্টের গতি এবং দক্ষতা বাড়ায়।

jQuery-র অ্যাডভান্সড সিলেক্টরস বিভিন্ন ধরনের এবং বিশেষ ক্ষেত্রের সিলেক্টর হিসাবে কাজ করে। এগুলো ব্যবহার করে আপনি অ্যাট্রিবিউট অনুযায়ী, হায়ারার্কি বা ডকুমেন্টের গঠন অনুসারে, এবং এলিমেন্টের পজিশন অনুযায়ী নির্দিষ্ট এলিমেন্টগুলোকে সিলেক্ট করতে পারেন। এই সিলেক্টরগুলো জটিল কাজগুলোকে সহজ এবং কার্যকর করে তোলে।

১. অ্যাট্রিবিউট সিলেক্টরস (Attribute Selectors)

অ্যাট্রিবিউট সিলেক্টরগুলি এমন এলিমেন্টগুলি খুঁজে পায় যাদের নির্দিষ্ট অ্যাট্রিবিউট রয়েছে অথবা যাদের অ্যাট্রিবিউটের মান নির্দিষ্ট কিছু অনুসারে সেট করা হয়েছে।

উদাহরণসমূহ:

• [attribute]: যে কোনো এলিমেন্ট যার নির্দিষ্ট অ্যাট্রিবিউট আছে।

  $("a[href]").css("color", "red"); // সব 'a' ট্যাগ যাদের 'href' অ্যাট্রিবিউট আছে।
  

• [attribute="value"]: যে কোনো এলিমেন্ট যাদের অ্যাট্রিবিউটের মান নির্দিষ্ট মূল্যের সাথে মিলে।

  $("input[type='text']").val("Hello World!"); // সব 'input' টাইপ যেগুলি 'text'।
  

• [attribute^="value"]: যে কোনো এলিমেন্ট যাদের অ্যাট্রিবিউট মান নির্দিষ্ট মূল্য দিয়ে শুরু হয়।

  $("a[href^='https']").css("color", "green"); // সব 'a' ট্যাগ যাদের 'href' HTTPS দিয়ে শুরু হয়।
  

• [attribute$="value"]: যে কোনো এলিমেন্ট যাদের অ্যাট্রিবিউট মান নির্দিষ্ট মূল্যে শেষ হয়।

  $("a[href$='.pdf']").css("color", "blue"); // সব 'a' ট্যাগ যাদের 'href' PDF ফাইলে শেষ হয়।
  

২. হায়ারার্কি সিলেক্টরস (Hierarchy Selectors)

হায়ারার্কি সিলেক্টরগুলি নির্দিষ্ট প্যারেন্ট-চাইল্ড সম্পর্ক অনুযায়ী এলিমেন্টগুলি খুঁজে পায়।

উদাহরণসমূহ:

• parent > child: সরাসরি চাইল্ড এলিমেন্টগুলি।

  $("div > p").css("color", "red"); // সব 'div' যার সরাসরি চাইল্ড 'p'।
  

• ancestor descendant: যেকোনো ডেপথের চাইল্ড এলিমেন্টগুলি।

  $("#main div").css("color", "blue"); // 'main' এর অধীনে যেকোনো ডেপথে 'div'।
  

• prev + next: সরাসরি পরবর্তী সিবলিং এলিমেন্ট।

  $("label + input").val("Sibling Input"); // সব 'label' এর পরের 'input'।
  

• prev ~ siblings: সমস্ত সিবলিং এলিমেন্টগুলি যা নির্দিষ্ট এলিমেন্টের পরে আসে।

  $("h1 ~ p").css("color", "green"); // 'h1' এর পরে আসা সব 'p'।
  

৩. পজিশন সিলেক্টরস (Position Selectors)

পজিশন সিলেক্টরগুলি নির্দিষ্ট অবস্থানের ভিত্তিতে এলিমেন্টগুলি খুঁজে পায়।

উদাহরণসমূহ:

• :first: নির্দিষ্ট সেটের প্রথম এলিমেন্ট।

  $("ul li:first").css("color", "red"); // প্রথম 'li'।
  

• :last: নির্দিষ্ট সেটের শে

ষ এলিমেন্ট।

$("ul li:last").css("color", "blue"); // শেষ 'li'।

• :eq(index): নির্দিষ্ট ইনডেক্সের এলিমেন্ট (০ থেকে শুরু)।

  $("ul li:eq(2)").css("color", "green"); // তৃতীয় 'li'।
  

• :odd / :even: বিজোড় / জোড় ইনডেক্সের এলিমেন্ট।

  $("ul li:odd").css("color", "purple"); // বিজোড় ইনডেক্সের 'li'।
  $("ul li:even").css("color", "cyan"); // জোড় ইনডেক্সের 'li'।
  

jQuery-র অ্যাডভান্সড সিলেক্টরগুলি ওয়েব ডেভেলপারদের জটিল সিলেক্টর প্যাটার্নগুলি সহজে ব্যবহার করতে সাহায্য করে, যা অন্যান্য জাভাস্ক্রিপ্ট মেথডগুলির চেয়ে অনেক বেশি কার্যকর এবং সহজ। এই সিলেক্টরগুলি ব্যবহার করে আপনি আপনার ডকুমেন্টের যেকোনো অংশে দ্রুত এবং নির্ভুলভাবে অ্যাক্সেস পেতে পারেন।